<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- v-model 在组件上的使用
    1. 使用modelValue直接传值 v-model="num" ，在子组件内部，num的状态会变成:modelValue
        子组件如果想与父组件通信，那么需要发送$emit('update:modelValue',事件对象)"
        注意：只能绑定其中一个状态
    
    2. 使用v-model:cha="msg"， 父->子：正常使用 :msg="msg" ,然后再props正常接收
       子->父： 子组件可以使用@change='$emit("update:cha",$event.target.value)'
                父组件：v-model:cha="msg"
    -->
    <div id="app">
        {{num}}
        <!-- <my-first :num="num" @add="num = $event"></my-first> -->
        <!-- v-model: v-bind 和 input事件 -->


        <my-first v-model="num"></my-first>
        {{msg}}
        <my-first :num="num" :msg="msg"  v-model:cha="msg" ></my-first>
        

    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        
       
        var app = Vue.createApp({
            data: function () {
                return {
                    num:1,
                    msg:'hello'
                }
            },
        })
        //component(组件名,{}):组件
        //1.最好是两个单词组合起来，大驼峰的形式


        /* 全局组件的注册 */
        app.component('MyFirst', {
            template:`
                <div class='my-first'>
                    <button @click="$emit('update:modelValue',modelValue+1)">点击{{modelValue}}</button>
                    <input type='text' :value="msg" @change='$emit("update:cha",$event.target.value)'  />
                </div>
            `,
            props:{
                modelValue:{
                    type:Number,
                },
                msg:{
                    type:String,
                    required:true
                }
            }
        });
        
        app.mount('#app');
    </script>
</body>

</html>